<script setup>
import { ref, onMounted } from 'vue'
import router from '@/router';
import loginApi from '@/api/Login_api.js';
import userApi from '../api/User_api.js'
import {ElMessage} from "element-plus";
import {method} from "lodash";


// 当前用户信息
const user = ref({
  id: '',
  photo:'',
  userNickname: '',
  userSect: '未知',
  userIntroduction: '',
  userBirthday: '',
  userEmail: '',
  userPhone: '',
  userAddress: '',
  followCount: 0,
  followedCount: 0,
})

const loading = ref(false)
const error = ref('')

const onSubmit=async()=>{
  await userApi.edit(user.value);
  ElMessage.success('修改成功');
}
// 获取登录用户基本信息
const fetchLoginInfo = async () => {
    loading.value = true
    const res = await loginApi.loginInfo();
    if (res) {
      // 获取到登录用户基本信息后，再通过one API获取完整用户信息
      await fetchUserDetailInfo(res.id);
    } else {
      error.value = '未获取到用户信息，请重新登录'
    }
}
const handleAvatarSuccess=(response,file)=>{
  console.log("-------------------");
  console.log(response);
  console.log(file);
  user.value.photo=response.data;
}
// 通过用户ID获取完整用户信息
const fetchUserDetailInfo = async (id) => {
  try {
    const res = await userApi.one(id);
    if (res) {
      // 更新用户信息
      user.value = res;
    }
  } catch (err) {
    console.error('获取用户详情失败:', err)
    error.value = '获取用户详情失败'
  }
}

onMounted(() => {
  fetchLoginInfo();
})

</script>

<template>
  <el-form :model="user" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户头像">
      <el-upload
          class="avatar-uploader"
          action="/api/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
      <img v-if="user.photo" :src="user.photo" />
      <img v-else src="@/assets/photo.png" />
      </el-upload>
    </el-form-item>
    <el-form-item label="用户昵称">
      <el-input v-model="user.userNickname" />
    </el-form-item>
    <el-form-item label="标签">
      <el-select v-model="user.userSect" placeholder="please select your zone">
        <el-option label="知识寻求者" value="zhishi" />
        <el-option label="娱乐消遣者" value="yvle" />
        <el-option label="潮流追随者" value="chaoliu" />
        <el-option label="社群归属者" value="shequn" />
        <el-option label="生活记录者" value="shenghuo" />
      </el-select>
    </el-form-item>
    <el-form-item label="用户生日">
      <el-col :span="11">
        <el-date-picker
            v-model="user.userBirthday"
            type="date"
            placeholder="请选择"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="用户邮箱">
      <el-input v-model="user.userEmail" placeholder="请填写信息"/>
    </el-form-item>
    <el-form-item label="用户电话">
      <el-input v-model="user.userPhone" placeholder="请填写信息"/>
    </el-form-item>
    <el-form-item label="用户地址">
      <el-input v-model="user.userAddress" placeholder="请填写信息"/>
    </el-form-item>
    <el-form-item label="用户简介">
      <el-input v-model="user.userIntroduction" type="textarea" placeholder="请介绍一下自己"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>
